import BannerPng from "@/assets/images/banner2.png";
import { post } from "@/request";
import { useEffect, useState } from "react";

export default function Help() {
  const [info, setInfo] = useState<any[]>([]);

  const getInfo = () => {
    post("/function/getHelpDirectoryTree", { params: {} }).then((res: any) => {
      setInfo([...res]);
    });
  };

  useEffect(() => {
    getInfo();
  }, []);
  return (
    <div>
      <div
        style={{
          maxWidth: "1200px",
          fontSize: "50px",
          textAlign: "center",
          background: "#5ea1f7",
          color: "#fff",
          margin: "20px auto",
        }}
      >
        Help
      </div>
      <div style={{ maxWidth: "1200px", margin: "20px auto", background: "#fff", padding: "20px" }}>
        <div style={{ textIndent: "2em" }}>
          STRDB is a carefully curated database that enables users to explore experimentally validated or
          molecular-dynamics-simulated 3D structural data of STRs. These data are extracted from STRDB peer-reviewed
          publications by PubMed. Each entry corresponds to a unique STRs or STRs-ligand complex and comprises detailed
          annotations, DNA/RNA sequence, ligand name, protein name, 3D structural determination method (NMR, X-ray
          crystallography, cryo-EM), experimental conditions (temperature, pH, and ions), PDB ID, and graphical 3D
          structure views. The data are organized in a structured, tabular format with the following key features:
        </div>
        <div>
          <ul style={{ paddingLeft: "50px", display: "flex", flexDirection: "column", gap: "10px" }}>
            <li>
              <strong>Search and Filtering: </strong>Users can perform keyword-based searches across all text fields
              (e.g., type of STRs, sequence; structural determination method; experimental conditions etc.).
            </li>
            <li>
              <strong>Sorting:</strong> Numerical fields (e.g., temperature and pH) can be sorted in ascending or
              descending order. Categorical fields (e.g., PDB ID) can be sorted alphabetically (A–Z or Z–A). In
              particular, Sequence can be sorted by the length of the fields.
            </li>
            <li>
              <strong>3D Molecular Visualization Interface</strong>
            </li>
          </ul>
          <div style={{ textIndent: "2em" }}>
            STRDB integrates the LiteMol viewer to enable full-atom structural visualization across web browsers and
            mobile platforms. This implementation supports interactive exploration of STRs conformations and associated
            ligand/protein complexes. Users may perform the following operations:
          </div>
          <ul
            style={{
              paddingLeft: "50px",
              display: "flex",
              flexDirection: "column",
              gap: "10px",
            }}
          >
            <li>
              <strong>Structure Manipulation:</strong> Rotate, zoom, and translate molecular structures in real-time.
            </li>
            <li>
              <strong>Representation Control:</strong> Toggle between multiple rendering modes, 1) Ball-and-stick; 2)
              Van der Waals spheres; 3) Molecular surface; 4) Cartoon (protein backbone); 5) C-α trace
            </li>
            <li>
              <strong>Visual Customization:</strong> Adjust background color; Modify structure coloration schemes;
              Select individual atoms to display atomic coordinates and properties
            </li>
            <li>
              <strong>Image Export:</strong> Export customized views directly to PNG format for local storage and
              publication-ready figure generation.
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}
